<script>
import {
  Cpu,
  DocumentChecked,
  Lollipop,
  Reading,
} from "@element-plus/icons-vue";
import ApiDoc from "./api/ApiDoc.vue";

export default {
  name: "ApiEdit",
  components: { ApiDoc, Cpu, DocumentChecked, Lollipop, Reading },
  props: {
    id: String,
    index: Number,
  },
  data() {
    return {
      selectTabName: "doc",
    };
  },
};
</script>

<template>
  <div style="position: relative; left: 50%">
    <el-tabs
      style="width: 96%; position: relative; transform: translateX(-50%)"
      v-model="selectTabName"
    >
      <el-tab-pane name="doc">
        <template #label>
          <el-icon size="large">
            <Reading />
          </el-icon>
          <el-text type="info" size="large">文档</el-text>
        </template>
        <ApiDoc :id="id" />
      </el-tab-pane>

      <!-- <el-tab-pane name="test" lazy>
        <template #label>
          <el-icon size="large">
            <Cpu />
          </el-icon>
          <el-text type="info" size="large">测试</el-text>
        </template>
        test
      </el-tab-pane>

      <el-tab-pane name="sample" lazy>
        <template #label>
          <el-icon size="large">
            <DocumentChecked />
          </el-icon>
          <el-text type="info" size="large">测试用例</el-text>
        </template>
        sample
      </el-tab-pane>

      <el-tab-pane name="mock" lazy>
        <template #label>
          <el-icon size="large">
            <Lollipop />
          </el-icon>
          <el-text type="info" size="large">Mock</el-text>
        </template>
        mock
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<style scoped>
</style>